import React from "react";
import { sleep } from 'antd-mobile/es/utils/sleep'
const GuestIndex = () => {
    const [hasMore, setHasMore] = React.useState(false)
    const [page, setPage] = React.useState(1)
    const [list, setList] = React.useState([])

    const rightActions = [
        {
            key: 'delete',
            text: '删除',
            color: 'danger',
        },
    ]

    React.useEffect(() => {
        GetGuestData();
    }, [])

    // 滚动底部加载
    const loadMore = async () =>
    {
        await sleep(1000)
        GetGuestData();
    }

    // 下拉刷新
    const onRefresh = async() => 
    {
        setPage(1);
        setList([]);
        setHasMore(true);

        await sleep(1000)
        GetGuestData();
    }

    const GetGuestData = async () => 
    {
        let result = await React.HTTP.post('/guest/index', {
            page: page,
            busid: React.Business.id
        });

        if (result.code === 0) 
        {
            //没有更多数据
            setHasMore(false);
            return false;
        }
        else
        {
            //设置分页和列表合并
            setHasMore(true);
            setPage(page + 1);
            setList(list.concat(result.data));
        }
    }

    // 删除
    const GuestDel = async(id:number) =>
    {   
        let res = await React.UI.Dialog.confirm({
            title: '删除',
            content: '是否确认删除住客信息？',
        })

        if(!res) return false;

        let result = await React.HTTP.post('/guest/del', {
            gid: id,
            busid: React.Business.id
        });

        if(result.code === 0)
        {
            React.error(result.msg);
        }
        else
        {
            React.success(result.msg, () =>{});
            onRefresh();
        }
        
    }

    return (
        <>
            <React.UI.PullToRefresh onRefresh={onRefresh}>
                <React.UI.List>
                {
                        list.map((item: any) => {
                            return (
                                <React.UI.SwipeAction
                                    key={item.id}
                                    rightActions={rightActions}
                                    onAction={() => GuestDel(item.id)}
                                >
                                    <React.UI.List.Item description={item.mobile} clickable onClick={() =>React.navigate(`/guest/edit?gid=${item.id}`)}>
                                        {item.nickname}{item.gender == '0' ? '男' : '女'}
                                    </React.UI.List.Item>
                                </React.UI.SwipeAction>
                            )
                        })
                    }

                </React.UI.List>

                 {/* 列表滚动到底部自动加载更多数据。 */}
                <React.UI.InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
            </React.UI.PullToRefresh>

            <div className="addguest">
                <a className="" href="/guest/add">添加住客</a>
            </div>
        </>
    )
}

export default GuestIndex;